<template>
	<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" title="修改密码" :width="600">
		<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="120px" :model="paramsForm" :rules="paramsRules">
			<el-row :gutter="16" justify="start">
				<el-col :span="24">
					<el-form-item class="form-item" label="用户密码:" prop="password">
						<el-input v-model="paramsForm.password" placeholder="请输入用户密码">
							<template #append>
								<div style="cursor: pointer" @click="handleCreatePwd">生成密码</div>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="form-item" label="确认密码:" prop="prePwd">
						<el-input v-model="paramsForm.prePwd" placeholder="请输入确认密码" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import global from '@/utils/global'
const emit = defineEmits(['peak-modal-ok'])
import { MD5 } from 'crypto-js'

/*
 *@Description: 初始化数据
 *@Author: Liu
 *@Date: 2023-02-24 15:30:30
 */
const state = reactive({
	showModal: false,
	paramsFormRef: null,
	paramsForm: {
		userId: '',
		password: '', //用户密码
		prePwd: '',
	},
	paramsRules: {
		password: [
			{ required: true, message: '用户密码不能为空', trigger: 'blur' },
			{
				pattern: /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
				message: '密码格式不正确！',
			},
		],
		prePwd: [
			{
				required: true,
				validator: (rule, value, callback) => {
					if (!value) {
						callback(new Error('确认密码不能为空！'))
					} else if (value != state.paramsForm.password) {
						callback(new Error('两次输入的密码不一致！'))
					} else {
						callback()
					}
				},
				trigger: 'blur',
			},
		],
	},
})
const { showModal, paramsForm, paramsRules, paramsFormRef } = toRefs(state)
/*
 *@Description: 方法method
 *@Author: Liu
 *@Date: 2023-02-24 15:30:45
 */
const handleSure = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			handleSureOk()
		} else {
			return false
		}
	})
}
const handleSureOk = () => {
	global
		.$fetchPostData(`/meta-system/web/v1/sysUser/resetPwd`, {
			...state.paramsForm,
			password: MD5(state.paramsForm.password).toString(),
			prePwd: MD5(state.paramsForm.prePwd).toString(),
		})
		.then(data => {
			if (data.code == 200) {
				global.$baseMessage('重置成功！', 'success')
				state.showModal = false
				emit('peak-modal-ok')
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = row => {
	state.showModal = true
	state.paramsForm.password = ''
	state.paramsForm.prePwd = ''
	state.paramsForm.userId = row.userId
}
//业务接口
const handleCreatePwd = () => {
	global.$fetchPostData(`/meta-system/web/v1/sysUser/createPwd`, {}).then(data => {
		if (data.code == 200) {
			state.paramsForm.password = data.data
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped></style>
